<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="/css/layui.min.2.9.21.css">
  <link rel="stylesheet" href="/css/index.css">
</head>

<body>

  <div class="layui-row main">
    <div class="layui-col-sm2 layui-col-xs0"> </div>
    <div class="layui-col-sm8 layui-col-xs12">

      <div class="layui-bg-gray" style="padding: 16px;">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">分类
                --
                <a href="./update_base_url.html" target="_blank" rel="noopener noreferrer">更新基础url</a>
              </div>
              <div class="layui-card-body">
                <div>

                  <div class="layui-form-item">
                    <div class="layui-input-group">
                      <input type="text" placeholder="搜索，多条件使用空格隔开" class="layui-input" id="seachValue">
                      <div class="layui-input-split layui-input-suffix" style="cursor: pointer;" id="seach">
                        <i class="layui-icon layui-icon-search"></i>
                      </div>
                      <button onclick="clearSearch()" type="button" class="layui-btn"
                        style="margin-left: 25px;">清除搜索</button>
                    </div>
                  </div>

                  <hr class="layui-border-green">

                  <div class="layui-form" lay-filter="form-demo-skin">
                    <div>
                      <input type="radio" name="type" value="" lay-skin="none" lay-filter="demo-radio-type" checked>
                      <div lay-radio class="lay-skin-tag layui-badge">全部</div>
                      <input type="radio" name="type" value="一般" lay-skin="none" lay-filter="demo-radio-type">
                      <div lay-radio class="lay-skin-tag layui-badge">一般向</div>
                      <input type="radio" name="type" value="BL" lay-skin="none" lay-filter="demo-radio-type">
                      <div lay-radio class="lay-skin-tag layui-badge">BL向</div>
                      <input type="radio" name="type" value="禁漫" lay-skin="none" lay-filter="demo-radio-type">
                      <div lay-radio class="lay-skin-tag layui-badge">禁漫</div>
                      <input type="radio" name="type" value="女性向" lay-skin="none" lay-filter="demo-radio-type">
                      <div lay-radio class="lay-skin-tag layui-badge">女性向</div>
                    </div>
                  </div>

                  <hr class="layui-border-green">

                  <div class="layui-form" lay-filter="form-demo-skin">
                    <div>
                      <input type="radio" name="region" value="" lay-skin="none" lay-filter="demo-radio-region" checked>
                      <div lay-radio class="lay-skin-tag layui-badge">全部</div>
                      <input type="radio" name="region" value="韩国" lay-skin="none" lay-filter="demo-radio-region">
                      <div lay-radio class="lay-skin-tag layui-badge">韩国</div>
                      <input type="radio" name="region" value="日漫" lay-skin="none" lay-filter="demo-radio-region">
                      <div lay-radio class="lay-skin-tag layui-badge">日漫</div>
                      <input type="radio" name="region" value="国漫" lay-skin="none" lay-filter="demo-radio-region">
                      <div lay-radio class="lay-skin-tag layui-badge">国漫</div>
                      <input type="radio" name="region" value="台漫" lay-skin="none" lay-filter="demo-radio-region">
                      <div lay-radio class="lay-skin-tag layui-badge">台漫</div>
                      <input type="radio" name="region" value="其他" lay-skin="none" lay-filter="demo-radio-region">
                      <div lay-radio class="lay-skin-tag layui-badge">其他</div>
                      <input type="radio" name="region" value="未分类" lay-skin="none" lay-filter="demo-radio-region">
                      <div lay-radio class="lay-skin-tag layui-badge">未分类</div>
                    </div>
                  </div>

                  <hr class="layui-border-green">

                  <div class="layui-form" lay-filter="form-demo-skin">
                    <div>
                      <input type="radio" name="update_date" value="新漫" lay-skin="none"
                        lay-filter="demo-radio-update_date" checked>
                      <div lay-radio class="lay-skin-tag layui-badge">新漫</div>
                      <input type="radio" name="update_date" value="最旧" lay-skin="none"
                        lay-filter="demo-radio-update_date">
                      <div lay-radio class="lay-skin-tag layui-badge">最旧</div>
                    </div>
                  </div>

                  <hr class="layui-border-green">

                  <div class="layui-form" lay-filter="form-demo-skin">
                    <div>
                      <input type="radio" name="status_" value="" lay-skin="none" lay-filter="demo-radio-status"
                        checked>
                      <div lay-radio class="lay-skin-tag layui-badge">全部</div>
                      <input type="radio" name="status_" value="0" lay-skin="none" lay-filter="demo-radio-status">
                      <div lay-radio class="lay-skin-tag layui-badge">连载中</div>
                      <input type="radio" name="status_" value="1" lay-skin="none" lay-filter="demo-radio-status">
                      <div lay-radio class="lay-skin-tag layui-badge">完结</div>
                    </div>
                  </div>

                  <hr class="layui-border-green">

                  <div class="layui-form" lay-filter="form-demo-skin">
                    <div>
                      <input type="radio" name="chapter_count" value="0" lay-skin="none"
                        lay-filter="demo-radio-chapter_count" checked>
                      <div lay-radio class="lay-skin-tag layui-badge">全部</div>
                      <input type="radio" name="chapter_count" value="1" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">1节以上</div>
                      <input type="radio" name="chapter_count" value="5" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">5节以上</div>
                      <input type="radio" name="chapter_count" value="10" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">10节以上</div>
                      <input type="radio" name="chapter_count" value="20" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">20节以上</div>
                      <input type="radio" name="chapter_count" value="30" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">30节以上</div>
                      <input type="radio" name="chapter_count" value="40" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">40节以上</div>
                      <input type="radio" name="chapter_count" value="50" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">50节以上</div>
                      <input type="radio" name="chapter_count" value="60" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">60节以上</div>
                      <input type="radio" name="chapter_count" value="70" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">70节以上</div>
                      <input type="radio" name="chapter_count" value="80" lay-skin="none"
                        lay-filter="demo-radio-chapter_count">
                      <div lay-radio class="lay-skin-tag layui-badge">80节以上</div>
                    </div>
                  </div>

                  <hr class="layui-border-green">

                  <div id="demo-laypage-all"></div>

                  <hr class="layui-border-green">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="flow-demo" id="ID-flow-demo-manual"></div>

      <div id="demo-laypage-all2" style="text-align: center;"></div>

    </div>
    <div class="layui-col-sm2 layui-col-xs0"> </div>

  </div>

  <script src="/js/jquery.min.js"></script>
  <script src="/js/crypto-js.js"></script>
  <script src="/js/webp-hero.bundle.js"></script>
  <!-- 需要 main_load_img.js 来加载图片。且img标签的src为空才行,真实的图片地址在data-r-src属性中 -->
  <script src="/js/main_load_img.js"></script>
  <script src="/js/layui.min.2.9.21.js"></script>
  <script src="../js/axios.js"></script>
  <script>

    layui.use(function () {
      var layer = layui.layer;
      var form = layui.form;
      var table = layui.table;
      var util = layui.util;
      var flow = layui.flow;
      var laypage = layui.laypage;

      // 流加载实例
      flow.load({
        elem: '#ID-flow-demo-manual', // 流加载容器
        scrollElem: '#ID-flow-demo-manual', // 滚动条所在元素，一般不用填，此处只是演示需要。
        isAuto: false,
        isLazyimg: true,
        moreText: ' ',
        done: function (page, next) { // 加载下一页

          axios.get('/getBooks' + new URL(jsonToUrl()).search)
            .then(function (response) {
              let { data } = response;
              let html = ``;

              data.forEach(element => {
                html += `
                <li class="itemBook">
                  <a href="/pages/book.html?id=${element.id}" target="_blank" rel="noopener noreferrer"  title="${element.name_}">
                    <img src="${element.img}" data-r-src="" class="itemImg lazy_img_no">
                    <p class="itemName">${(element?.chapter_count ? (element?.chapter_count + '话-') : '') + element.name_}</p>
                  </a>
                </li>`;
              });

              next(html, true)
              //   loadImg(); // 加载图片
            })
            .catch(function (error) {
              console.log(error);
              next('', false)
            });
        }
      });


      // 完整显示
      laypage.render({
        elem: 'demo-laypage-all', // 元素 id
        count: 1000000, // 数据总数
        curr: urlToJson().search_.page || 1,
        layout: ['prev', 'next', 'skip'], // 功能布局
        jump: function (obj, first) {
          if (!first) { location.href = jsonToUrl({ page: obj.curr }) }
        }
      });
      laypage.render({
        elem: 'demo-laypage-all2', // 元素 id
        count: 1000000, // 数据总数
        curr: urlToJson().search_.page || 1,
        layout: ['prev', 'next', 'skip'], // 功能布局
        jump: function (obj, first) {
          if (!first) { location.href = jsonToUrl({ page: obj.curr }) }
        }
      });

      // radio 单选事件
      form.on('radio(demo-radio-type)', function (data) {
        // location.href = jsonToUrl({ type: data.elem.value, search: '', page: 1 })
        location.href = jsonToUrl({ type: data.elem.value, page: 1 })
      });
      form.on('radio(demo-radio-region)', function (data) {
        // location.href = jsonToUrl({ region: data.elem.value, search: '', page: 1 })
        location.href = jsonToUrl({ region: data.elem.value, page: 1 })
      });
      form.on('radio(demo-radio-update_date)', function (data) {
        // location.href = jsonToUrl({ update_date: data.elem.value, search: '', page: 1 })
        location.href = jsonToUrl({ update_date: data.elem.value, page: 1 })
      });
      form.on('radio(demo-radio-status)', function (data) {
        // location.href = jsonToUrl({ status_: data.elem.value, search: '', page: 1 })
        location.href = jsonToUrl({ status_: data.elem.value, page: 1 })
      });
      form.on('radio(demo-radio-chapter_count)', function (data) {
        // location.href = jsonToUrl({ status_: data.elem.value, search: '', page: 1 })
        location.href = jsonToUrl({ chapter_count: data.elem.value, page: 1 })
      });

      // 重新渲染单选
      let search__ = urlToJson().search_;
      Object.keys(search__).forEach((value, index, array) => {
        document.querySelector(`[checked][name="${value}"]`)?.removeAttribute('checked');
        document.querySelector(`[value="${decodeURIComponent(search__[value])}"][name="${value}"]`)?.setAttribute('checked', '');
      })
      form.render('radio');

      document.getElementById('seachValue').value = decodeURIComponent(search__?.search || '');
      // 搜索
      function searchFun() {
        let value = document.getElementById('seachValue').value.trim() || '';
        let o = urlToJson();
        // location.href = jsonToUrl({ search: value, page: 1 }, o.origin + o.pathname)
        location.href = jsonToUrl({ search: value, page: 1 })
      }
      $('#seach').click(searchFun);
      document.getElementById('seachValue').addEventListener('keydown', function (event) {
        if (event.key === 'Enter' || event.keyCode === 13) { // 兼容旧浏览器
          event.preventDefault(); // 阻止默认行为（如表单提交）
          searchFun()
        }
      });
    });

    function clearSearch() {
      location.href = jsonToUrl({ search: '', page: 1 })
    }

  </script>
</body>

</html>